<template>
    <div class="searchBar">
        <div class="content">
            <div class="selectDate">
                <div class="startDate">
                    <span class="start">住</span>
                    <span class="date">10.18</span>
                </div>
                <div class="endDate">
                    <span class="end">离</span>
                    <span class="date">10.19</span>
                </div>
            </div>
            <div class="search">
                <van-search v-model="value" placeholder="关键字/位置/民宿名" left-icon=" " right-icon="search" />
            </div>
        </div>

    </div>
</template>

<script setup>
</script>

<style lang="less" scoped>
.searchBar {

    background: #fff;

    .content {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 5px 0 5px 5px;
        margin: 10px 10px;
        border-radius: 14px 16px 14px 14px;
        background-color: rgb(242, 244, 246);
    }

    .selectDate {
        font-size: 12px;
        color: #999;
        padding-right: 10px;
        border-right: rgb(255, 255, 255) 3px solid;

        .date {
            color: #333;
        }
    }

    :deep(.van-search) {
        border-radius: 14px 16px 14px 14px;
        background-color: rgb(242, 244, 246);
        padding: 0;
    }
}
</style>